<div class="suite-container">
  <div class="suite">
    <div class="tiers">
      <div class="test-tier" data-tier="1">
        <h4><a href="#general-tests">{{ _('General Tests') }}</a></h4>
        <div class="tier-summary"></div>
      </div>
      <div class="test-tier" data-tier="2">
        <h4><a href="#security-tests">{{ _('Security Tests') }}</a></h4>
        <div class="tier-summary"></div>
      </div>
      <div class="test-tier" data-tier="3">
        <h4><a href="#extension-tests">{{ _('Extension Tests') }}</a></h4>
        <div class="tier-summary"></div>
      </div>
      <div class="test-tier" data-tier="4">
        <h4><a href="#localization-tests">{{ _('Localization Tests') }}</a></h4>
        <div class="tier-summary"></div>
      </div>
      <div class="test-tier" data-tier="5">
        <h4><a href="#compatibility-tests">{{ _('Compatibility Tests') }}</a></h4>
        <div class="tier-summary"></div>
      </div>
    </div>
    <div class="suite-options validator-signing-only">
      <div>
        <label>
          <input type="checkbox" id="signing-hide-unnecessary" checked="true">
          {{ _('Hide messages not required for automated signing') }}
        </label>
      </div>
      <div id="signing-hide-ignored-container">
        <label>
          <input type="checkbox" id="signing-hide-ignored" checked="true">
          {{ _('Hide messages present in previous version and ignored') }}
        </label>
      </div>
    </div>
    <div class="suite-summary">
      <span></span>
    </div>
  </div>
</div>
<div class="results">
  <div class="result" id="suite-results-tier-1">
    <div class="result-header">
      <ul class="result-nav">
        {# L10n: abbreviation of 'previous' #}
        <li>{{ _('Prev') }}</li>
        <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
        <li><a href="#suite-results-tier-2">{{ _('Next') }}</a></li>
      </ul>
      <h4 id="general-tests">{{ _('General Tests') }}</h4>
      {# The dot fixes layout for a few secs when the page first loads. #}
      <div class="result-summary">.</div>
    </div>
    <div class="tier-results" data-tier="1"></div>
  </div>
  <div class="result" id="suite-results-tier-2">
    <div class="result-header">
      <ul class="result-nav">
        {# L10n: abbreviation of 'previous' #}
        <li><a href="#suite-results-tier-1">{{ _('Prev') }}</a></li>
        <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
        <li><a href="#suite-results-tier-3">{{ _('Next') }}</a></li>
      </ul>
      <h4 id="security-tests">{{ _('Security Tests') }}</h4>
      <div class="result-summary">.</div>
    </div>
    <div class="tier-results" data-tier="2"></div>
  </div>
  <div class="result" id="suite-results-tier-3">
    <div class="result-header">
      <ul class="result-nav">
        {# L10n: abbreviation of 'previous' #}
        <li><a href="#suite-results-tier-2">{{ _('Prev') }}</a></li>
        <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
        <li><a href="#suite-results-tier-4">{{ _('Next') }}</a></li>
      </ul>
      <h4 id="extension-tests">{{ _('Extension Tests') }}</h4>
      <div class="result-summary">.</div>
    </div>
    <div class="tier-results" data-tier="3"></div>
  </div>
  <div class="result" id="suite-results-tier-4">
    <div class="result-header">
      <ul class="result-nav">
        {# L10n: abbreviation of 'previous' #}
        <li><a href="#suite-results-tier-3">{{ _('Prev') }}</a></li>
        <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
        <li><a href="#suite-results-tier-5">{{ _('Next') }}</a></li>
      </ul>
      <h4 id="localization-tests">{{ _('Localization Tests') }}</h4>
      <div class="result-summary">.</div>
    </div>
    <div class="tier-results" data-tier="4"></div>
  </div>
  <div class="result" id="suite-results-tier-5">
    <div class="result-header">
      <ul class="result-nav">
        {# L10n: abbreviation of 'previous' #}
        <li><a href="#suite-results-tier-4">{{ _('Prev') }}</a></li>
        <li><a href="#addon-validator-suite">{{ _('Top') }}</a></li>
        <li>{{ _('Next') }}</li>
      </ul>
      <h4 id="compatibility-tests">{{ _('Compatibility Tests') }}</h4>
      <div class="result-summary">.</div>
    </div>
    <div class="tier-results" data-tier="5"></div>
  </div>
</div>
